<template>
  <!-- 案件类型调整设置页面 -->
  <section class="page case-adjustment-type-setting">
    <data-form :model="model" :page="pageService" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="类型名称" prop="name">
          <el-input v-model.trim="model.name"></el-input>
        </el-form-item>
        <el-form-item label="修改人代号" prop="agentName">
          <el-input v-model.trim="model.agentName"></el-input>
        </el-form-item>
        <el-form-item label="复核人代号" prop="reviewerName">
          <el-input v-model.trim="model.reviewerName"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select clearable placeholder="请选择" v-model="model.status">
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('CommonState')"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <data-box
      :data="dataSet"
      :page="pageService"
      :sort="sortService"
      @onPageChange="refreshData"
    >
      <template slot="buttons">
        <el-button @click="onClickAddTag">新增调整类型</el-button>
      </template>
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="onClickEditTag(scope.row)"
              :disabled="scope.row.applyStatus === 'PENDING'"
              >编辑</el-button
            >
            <el-button type="text" @click="onClickDetailTag(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="类型名称"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          label="需联动标签类型"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
          <template slot-scope="scope">
            <div>
              <span>
                {{
                  scope.row.at.length || scope.row.delAt.length ? "AT，" : ""
                }}</span
              >
              <span>
                {{
                  scope.row.ct.length || scope.row.delCt.length ? "CT" : ""
                }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="新增的标签"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(10)"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.at.length">
              <span> AT：</span>
              <span v-for="item in scope.row.at" :key="item">{{ item }}，</span>
            </div>
            <div v-if="scope.row.ct.length">
              <span> CT：</span>
              <span v-for="item in scope.row.ct" :key="item">{{ item }}，</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="释放标签"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(10)"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.delAt.length">
              <span> AT：</span>
              <span v-for="item in scope.row.delAt" :key="item"
                >{{ item }}，</span
              >
            </div>
            <div v-if="scope.row.delCt.length">
              <span> CT：</span>
              <span v-for="item in scope.row.delCt" :key="item"
                >{{ item }}，</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
          :formatter="row => $filter.dictConvert(row.status, 'CommonState')"
        >
        </el-table-column>
        <el-table-column
          prop="agentCode"
          show-overflow-tooltip
          label="修改人代号"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="maintainDate"
          label="修改时间"
          show-overflow-tooltip
          :formatter="row => $filter.dateTimeFormat(row.maintainDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="reviewerCode"
          label="复核人代号"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="reviewerDate"
          label="复核时间"
          :formatter="row => $filter.dateTimeFormat(row.reviewerDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="note"
          label="注记"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          label="审批记录"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="onClickDetailLog(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </template>
    </data-box>

    <!-- 新增调整类型 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialog.add"
      :title="title"
      :close-on-press-escape="false"
      append-to-body
      width="700px"
    >
      <add-change-type
        @close="dialog.add = false"
        ref="add-change-type"
        :row="row"
        @refreshData="refreshData"
        :isEdit="isEdit"
        :isDetail="isDetail"
      />
    </el-dialog>

    <!-- 查看详情 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialog.logDetail"
      title="查看详情"
      :close-on-press-escape="false"
      append-to-body
      @open="
        $nextTick(() => {
          $refs['log-detail'].refreshData();
        })
      "
    >
      <log-detail
        @close="dialog.logDetail = false"
        ref="log-detail"
        :row="row"
      />
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { Getter, namespace, State } from "vuex-class";
import { MENU_CHANNEL } from "~/config/enum.config";
import AddChangeType from "~/components/customer-group-management/add-change-type.vue";
import LogDetail from "~/components/customer-group-management/log-detail.vue";
import changeTypeDetail from "~/components/customer-group-management/change-type-detail.vue";
import { CustomerGroupManageService } from "~/services/domain-service/customer-group-manage.service";

@Auth(2318)
@Layout("workspace")
@Component({
  components: {
    AddChangeType,
    LogDetail,
    changeTypeDetail
  }
})
export default class CaseAdjustmentTypeSetting extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CustomerGroupManageService)
  private customerGroupManageService: CustomerGroupManageService;

  private dataSet: any[] = [];
  private dialog = {
    add: false,
    logDetail: false,
    detail: false
  };
  private row: any = {};
  private title = "新增";
  private isEdit: boolean = false;
  private isDetail: boolean = false;
  private model: any = {
    name: "",
    agentName: "",
    reviewerName: "",
    status: ""
  };

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    this.sortService.update("maintainDate", "desc");
    this.customerGroupManageService
      .findAllTypes(this.paramsHandler(), this.pageService, this.sortService)
      .subscribe(data => {
        this.dataSet = data;
        this.sortService.reset();
      });
  }

  private paramsHandler() {
    const params = { ...this.model };
    return params;
  }

  /**
   * 新增调整类型
   */
  private onClickAddTag() {
    this.dialog.add = true;
    this.isEdit = false;
    this.title = "新增";
    this.row = {};
    this.isDetail = false;
    this.$nextTick(() => {
      const form: any = this.$refs["add-change-type"];
      form.$refs.model.resetFields();
      form.dataHandler();
    });
  }

  /**
   * 编辑
   */
  private onClickEditTag(row, type) {
    this.dialog.add = true;
    this.title = "编辑";
    this.isEdit = true;
    this.isDetail = false;
    this.row = row;
    this.$nextTick(() => {
      const form: any = this.$refs["add-change-type"];
      form.dataHandler();
      form.getHistoryNote();
    });
  }

  /**
   * 查看详情日志
   */
  private onClickDetailLog(row) {
    this.dialog.logDetail = true;
    this.row = row;
  }
  private onClickDetailTag(row) {
    this.dialog.add = true;
    this.title = "查看";
    this.isDetail = true;
    this.isEdit = false;
    this.row = row;
    this.$nextTick(() => {
      const form: any = this.$refs["add-change-type"];
      form.dataHandler();
      form.getHistoryNote();
    });
  }
}
</script>

<style lang="less" scoped></style>
